<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>休闲五子棋</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .ios-shadow {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 顶部状态栏 -->
    <div class="bg-white/10 backdrop-blur-md text-white px-4 py-2 flex justify-between items-center">
        <div class="flex items-center space-x-1">
            <div class="w-1 h-1 bg-white rounded-full"></div>
            <div class="w-1 h-1 bg-white rounded-full"></div>
            <div class="w-1 h-1 bg-white rounded-full"></div>
        </div>
        <div class="text-sm font-medium">9:41</div>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <i class="fas fa-battery-three-quarters text-xs"></i>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="px-6 py-8">
        <!-- 头部欢迎区域 -->
        <div class="text-center mb-8">
            <div class="w-24 h-24 mx-auto mb-4 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center ios-shadow">
                <i class="fas fa-chess-board text-4xl text-white"></i>
            </div>
            <h1 class="text-3xl font-bold text-white mb-2">休闲五子棋</h1>
            <p class="text-white/80 text-lg">享受经典策略游戏的乐趣</p>
        </div>

        <!-- 功能模块网格 -->
        <div class="grid grid-cols-2 gap-4 mb-8">
            <!-- 开始游戏 -->
            <div class="bg-white/95 backdrop-blur-md rounded-2xl p-6 card-hover ios-shadow" onclick="location.href='game.html'">
                <div class="text-center">
                    <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center">
                        <i class="fas fa-play text-2xl text-white"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">开始游戏</h3>
                    <p class="text-sm text-gray-600">立即开始一局五子棋</p>
                </div>
            </div>

            <!-- 游戏记录 -->
            <div class="bg-white/95 backdrop-blur-md rounded-2xl p-6 card-hover ios-shadow" onclick="location.href='history.html'">
                <div class="text-center">
                    <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-green-500 to-teal-600 rounded-2xl flex items-center justify-center">
                        <i class="fas fa-history text-2xl text-white"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">游戏记录</h3>
                    <p class="text-sm text-gray-600">查看历史对局</p>
                </div>
            </div>

            <!-- 排行榜 -->
            <div class="bg-white/95 backdrop-blur-md rounded-2xl p-6 card-hover ios-shadow" onclick="location.href='leaderboard.html'">
                <div class="text-center">
                    <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-yellow-500 to-orange-600 rounded-2xl flex items-center justify-center">
                        <i class="fas fa-trophy text-2xl text-white"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">排行榜</h3>
                    <p class="text-sm text-gray-600">查看全球排名</p>
                </div>
            </div>

            <!-- 设置 -->
            <div class="bg-white/95 backdrop-blur-md rounded-2xl p-6 card-hover ios-shadow" onclick="location.href='settings.html'">
                <div class="text-center">
                    <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-gray-500 to-gray-700 rounded-2xl flex items-center justify-center">
                        <i class="fas fa-cog text-2xl text-white"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-2">设置</h3>
                    <p class="text-sm text-gray-600">个性化设置</p>
                </div>
            </div>
        </div>

        <!-- 快速统计 -->
        <div class="bg-white/95 backdrop-blur-md rounded-2xl p-6 ios-shadow">
            <h3 class="text-lg font-semibold text-gray-800 mb-4 text-center">今日统计</h3>
            <div class="grid grid-cols-3 gap-4 text-center">
                <div>
                    <div class="text-2xl font-bold text-blue-600">5</div>
                    <div class="text-sm text-gray-600">胜利</div>
                </div>
                <div>
                    <div class="text-2xl font-bold text-red-600">2</div>
                    <div class="text-sm text-gray-600">失败</div>
                </div>
                <div>
                    <div class="text-2xl font-bold text-green-600">71%</div>
                    <div class="text-sm text-gray-600">胜率</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t border-gray-200/50">
        <div class="flex justify-around py-3">
            <div class="flex flex-col items-center text-blue-600">
                <i class="fas fa-home text-xl mb-1"></i>
                <span class="text-xs">首页</span>
            </div>
            <div class="flex flex-col items-center text-gray-400" onclick="location.href='game.html'">
                <i class="fas fa-gamepad text-xl mb-1"></i>
                <span class="text-xs">游戏</span>
            </div>
            <div class="flex flex-col items-center text-gray-400" onclick="location.href='profile.html'">
                <i class="fas fa-user text-xl mb-1"></i>
                <span class="text-xs">我的</span>
            </div>
        </div>
    </div>

    <script>
        // 添加点击效果
        document.querySelectorAll('.card-hover').forEach(card => {
            card.addEventListener('touchstart', function() {
                this.style.transform = 'scale(0.95)';
            });
            card.addEventListener('touchend', function() {
                this.style.transform = 'scale(1)';
            });
        });
    </script>
</body>
</html>